<template>
	<view class="page w-full h-100vh bg-fffbf4 flex flex-col align-items-center overflow-hidden">
		<z-paging ref="paging" v-model="listData" @query="queryList">
			<template #top>
				<view class="navBar w-full pl-30 pt-40 z-9999">
					<view class="title text-581403 f-40 text-bold flex justify-center align-items-center">
						寻根服务
						<image src="@/static/icon-16.png" class="back-icon" @click="$goBack()"></image>
					</view>
				</view>

				<view class="box flex flex-col align-items-center" @click="show = true">
					<view class="flex justify-center align-items-center dd">
						<image src="/src/static/icon-13.png"></image>
					</view>
					<!-- <text class="text-555 f-24 mt-10">我要发贴</text> -->
				</view>
			</template>
			<view class="list-item w-690 mt-20 m-auto p-40" :class="[index===0 ? 'mt-40' :''] "
				v-for="(item,index) in listData" :key="index"
				@click="$toPage(`/pages/root-list/detail?row=${JSON.stringify({title:item.title, description:item.description})}`)">
				<view class="text-581403 f-28 text-bold">{{ item.title }}</view>
				<view class="text-93776F f-26 mt-10 ellipsis-multi-4">{{ item.description }}</view>
			</view>
		</z-paging>

		<wd-popup v-model="show" closable safe-area-inset-bottom position="bottom"
			custom-style="border-radius:32rpx 32rpx 0 0;padding:30rpx;" @close="">
			<wd-form ref="form" size="large" :model="formData">
				<wd-cell-group border>
					<wd-input label="标题" label-width="100px" prop="title" clearable v-model="formData.title" placeholder="标题"
						:rules="[{ required: true, message: '标题' }]" />
					<wd-input label="详细说明" label-width="100px" prop="description" clearable v-model="formData.description"
						placeholder="详细说明" :rules="[{ required: true, message: '详细说明' }]" />
					<wd-input label="发布人姓名" label-width="100px" prop="publisher" clearable v-model="formData.publisher"
						placeholder="发布人姓名" :rules="[{ required: true, message: '发布人姓名' }]" />
					<wd-input label="联系电话" label-width="100px" prop="publisherPhone" clearable v-model="formData.publisherPhone"
						placeholder="联系电话" :rules="[{ required: true, message: '联系电话' }]" />
				</wd-cell-group>
				<view class="w-full mt-30">
					<wd-button type="primary" size="large" @click="handleSubmit" block>提交</wd-button>
				</view>
			</wd-form>
		</wd-popup>

	</view>
</template>

<script setup>
	import male from '@/static/male.png'
	import female from '@/static/female.png'

	const { api_get_rootSearchPage, api_post_rootSearch } = useRequest()
	const { proxy } = getCurrentInstance()

	const paging = ref(null)
	const listData = ref([])
	const queryList = (pageNo, pageSize) => {
		api_get_rootSearchPage({ page: pageNo - 1, size: pageSize }).then(res => {
			paging.value.complete(res.content);
		}).catch(res => {
			paging.value.complete(false);
		})
	}

	const show = ref(false)
	const form = ref(null)
	const formData = reactive({
		title: '',
		description: '',
		publisher: '',
		publisherPhone: ''
	})
	const handleSubmit = () => {
		api_post_rootSearch(formData).then(res => {
			uni.showToast({
				title: '发表成功'
			})
			show.value = false
			paging.value?.reload()
		})
	}
</script>

<style lang="scss" scoped>
	.page {
		background-image: url('/src/static/bg-08.png');
		background-size: 100% 100%;
	}

	.list-item {
		height: 260rpx;
		background-image: url('/src/static/bg-09.png');
		background-size: 100% 100%;
	}

	.box {
		position: fixed;
		bottom: 200rpx;
		right: 20rpx;
		z-index: 999;

		.dd {
			width: 96rpx;
			height: 96rpx;
			background-color: #c6c6c6;
			border-radius: 50%;

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
</style>